
<section class="content-header">
    <h1>
      义不容辞之事，当无怨无悔
      <small>乐乐的每日一句</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> 文章管理</a></li>
      <li class="active">创建文章</li>
    </ol>
  </section>
  <!-- Main content -->
  <section class="content">

<div class="box box-info">
     <form class="form-horizontal" id="forms"> 
        <div class="box-body">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">文章标题</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="inputEmail3" name="title" placeholder="文章标题">
             <input style="height:0px;border:0px;margin:0px;padding:0px" id="userid" type="text" value=<%= id%> >
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">文章描述</label>
            <div class="col-sm-8">
                <textarea class="form-control" rows="3" placeholder="请输入文章的简短描述" name="desc" id="desc"></textarea>
              </div>
            
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">文章封面</label>
            <div class="col-sm-8">
                <input id="uploadImg" type="file" class="file" data-preview-file-type="text">
                <input type="text" value="" id="logos" name="logo" style="height:0px;border:0px;margin:0px;padding:0px">
            </div>
         </div>
         <div class="form-group">
            <label class="col-sm-2 control-label" >文章类型</label>
            <div class="col-sm-8">
                <select class="form-control select2" style="width: 100%;" name="kind" id="kind">
                    <option selected="selected"></option>
                    <option>科技</option>
                    <option>新闻</option>
                    <option>百科</option>
                    <option>随笔</option>
                    <option>互联网</option>
                </select>
            </div>
         </div>
         <div class="form-group">
            <label class="col-sm-2 control-label">文章内容</label>
            <div class="col-sm-8" id="contentid">
                <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
                <input class="form-control" type="text" id="inputId" name="inputName"
               style="height:0px;border:0px;margin:0px;padding:0px" />
            </div>
         </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-info pull-right" id="lanuchs"  onclick="submits('0')">保存</button>
         <button type="button" class="btn btn-warning pull-middle" id="lanuch"  onclick="submits('1')">发布</button>
        </div>
        <!-- /.box-footer -->
      </form>
</div>


</section>


<script type="text/javascript">
// let edit = UE.getEditor('editor')
//     console.log(typeof edit)
//     if(  edit != ''){
//             console.log('点击了article页面')
//             edit.destroy();
//     }

UE.delEditor('editor');
function submits (data){
                            $('#forms').data('bootstrapValidator').validate();//启用验证
                            var flag = $('#forms').data('bootstrapValidator').isValid()//验证是否通过true/false
                            console.log(flag)
                            if(flag){
                                articleId = $('#userid').val()
                                // console.log(cookie_value)
                                title = $('#inputEmail3').val()
                                desc = $('#desc').val()
                                kinds = $('#kind').val()
                                contentUrl =  $('#logos').val()
                                kind  = kinds =='科技' ? '1' : kinds =='新闻'? '2': kinds =='百科'? '3': kinds =='互联网'? '4' :'0'
                                $.post(localhost+"/article/articleAction", { //jq的post方法
                                    title:title,
                                    desc: desc,
                                    kind:kind,
                                    status:data,
                                    articleMark:articleId,
                                    contentUrl:contentUrl,
                                    content: UE.getEditor('editor').getContent()
                                }, function(res) {
                                    swal.fire({
                                        type: res.type,
                                        title: res.message
                                    })
                                    .then((value) => {
                                            switch (value) {
                                                default:
                                                if(res.type =='success'){
                                                    // window.location.replace(localhost+"/manarticle");
                                                    $('.content-wrapper').load(localhost + "/manarticle");
                                                }
                                            }
                                            }
                                        );
                                    if(res.type =='success'){
                                        // window.location.replace(localhost+"/manarticle");
                                    }
                                   
                                })
                            }else{
                                Toast.fire({
                                        type: 'info',
                                        title: '请完善文章信息'
                                    })
                            }
                        };
 const Toast = Swal.mixin({
      toast: true,
      position: 'middle',
      showConfirmButton: false,
      timer: 3000
    });
$(document).ready(function() {
    swal.fire({
                type: 'info',
                title: '如果你发现无法保存或者发表文章可能是你的文章过长，请做修改！（节省开支😭）',
               
            })
                
    $(".select2").select2();
    $('#forms').bootstrapValidator({
      message: 'This value is not valid',
         feedbackIcons: {
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
      
      fields: {
        title: {
                validators: {  
                      notEmpty: {                        
                        message: '请填写文章名'                     
                      }
                                   
                    }             
                },
        inputName: {
          validators: {  
            notEmpty: {                        
                    message: '请填写文章内容'                     
                  }   
            }   
          },
        //   logo: {
        //   validators: {  
        //     notEmpty: {                        
        //             message: '请添加文章封面'                     
        //           }   
        //     }   
        //   },
          desc: {
            validators: {  
                  notEmpty: {                        
                    message: '请填写文章描述'                     
                  }

                }             
            },
            kind: {
            validators: {  
                  notEmpty: {                        
                    message: '请填写文章分类'                     
                  }
            }
      }
    }
    })
     

function getCookie(cookie_name) {
        var stringResult = '<%= id%>'.split(';');
        console.log(stringResult[2])
        var allcookies = document.cookie;
		//索引长度，开始索引的位置
        var cookie_pos = allcookies.indexOf(cookie_name);

        // 如果找到了索引，就代表cookie存在,否则不存在
        if (cookie_pos != -1) {
            // 把cookie_pos放在值的开始，只要给值加1即可
            //计算取cookie值得开始索引，加的1为“=”
            cookie_pos = cookie_pos + cookie_name.length + 1; 
            //计算取cookie值得结束索引
            var cookie_end = allcookies.indexOf(";", cookie_pos);
            
            if (cookie_end == -1) {
                cookie_end = allcookies.length;

            }
            //得到想要的cookie的值
            var value = unescape(allcookies.substring(cookie_pos, cookie_end)); 
        }
        return value;
    }

                 
                   
                

$("#forms").submit(function(e){ //uploadVideoForm为表单名称
   e.preventDefault()
});
          
function imgSrcToBase64(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,img.width,img.height);
    return canvas.toDataURL();
}
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    ue = UE.getEditor("editor", {
            initialFrameHeight: 40
        }).ready(function () {
            $($('.control-label')).css('border', $('#inputId').css('color'));
            var editor = UE.getEditor("editor");
            /*找到UEditor的iframe*/   
            var contents = $('#editor').find('iframe').contents();
            var fn = function () {
                $("#inputId").val(UE.getEditor("editor").getContent());
                $('#forms').data('bootstrapValidator')//重新验证inputName
                  .updateStatus('inputName', 'NOT_VALIDATED', null)
                  .validateField('inputName');               
            }

            if (document.all) {//document.all识别是否在IE下，在IE下为true
                contents.get(0).attachEvent('onpropertychange', function (e) {
                    fn();
                });
            } else {
                contents.on('input', fn);
            }
        });



    // bootstrap fileinput
    

initFileInput();
function initFileInput() {
    $("#uploadImg").fileinput({
        language: 'zh', //设置语言
        dropZoneTitle: '可以将图片拖放到这里 …支持多文件上传',
        uploadUrl: localhost+'/article/addimage', //上传的地址
        uploadExtraData: function(previewId, index) {   //该插件可以向您的服务器方法发送附加数据。这可以通过uploadExtraData在键值对中设置为关联数组对象来完成。所以如果你有设置uploadExtraData={id:'kv-1'}，在PHP中你可以读取这些数据$_POST['id']
         ids =  $('#id').val()
        // var id = ids == null || undefined || '' ? 'imgs123': ids;
        
            return {seriesId: ids};
        },
        allowedFileExtensions: ['jpg','png'],//接收的文件后缀
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
        showCaption: false,//是否显示文件标题，默认为true
        browseClass: "btn btn-primary", //文件选择器/浏览按钮的CSS类。默认为btn btn-primary
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 50, //图片的最小宽度
        minImageHeight: 50,//图片的最小高度
        maxImageWidth: 5000,//图片的最大宽度
        maxImageHeight: 5000,//图片的最大高度
        maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        minFileCount: 1, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
        maxFileCount: 0, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",//当检测到用于预览的不可读文件类型时，将在每个预览文件缩略图中显示的图标。默认为<i class="glyphicon glyphicon-file"></i>  
        layoutTemplates:{
            actionUpload:'',//去除上传预览缩略图中的上传图片
            actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
            actionDownload:'', //去除上传预览缩略图中的下载图标
            actionDelete:'', //去除上传预览的缩略图中的删除图标
        },//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",//字符串，当文件数超过设置的最大计数时显示的消息 maxFileCount。默认为：选择上传的文件数（{n}）超出了允许的最大限制{m}。请重试您的上传！
    }).on('filebatchpreupload', function(event, data) { //该方法将在上传之前触发
        var id = $('#id option:selected').val();
        if(id == 0){
            return {
                message: "请选择", // 验证错误信息在上传前要显示。如果设置了这个设置，插件会在调用时自动中止上传，并将其显示为错误消息。您可以使用此属性来读取文件并执行自己的自定义验证
                data:{id : $('#id').val()} // any other data to send that can be referred in `filecustomerror`
            };
        }
    });
}
//fileuploaded此事件仅针对ajax上传触发，并在每个缩略图文件上传完成后触发。此事件仅针对ajax上传并在以下情况下触发：当点击每个预览缩略图中的上传图标并且文件上传成功时，或者当你有 uploadAsync设置为true您已触发批量上传。在这种情况下，fileuploaded每一个人选择的文件被上传成功后，触发事件。
var id_str = 1;
$('#uploadImg').on('fileuploaded', function(event, data, previewId, index) {
    var val = data.response
    if(val){
       console.log(data.response)
       val =val.replace('/usr/local/boke-pro/bokenews/public','http://lele.daxunxun.com:9000')
       $('#logos').val(val)
       var val =  $('#logos').val()
    
    }
});
// filebatchuploadcomplete此事件仅在ajax上传和完成同步或异步ajax批量上传后触发。
});
</script>

<!-- <div >
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
  
</div> -->
<!-- <div id="btns">
    <div>
        <button onclick="getAllHtml()">获得整个html的内容</button>
        <button onclick="getContent()">获得内容</button>
        <button onclick="setContent()">写入内容</button>
        <button onclick="setContent(true)">追加内容</button>
        <button onclick="getContentTxt()">获得纯文本</button>
        <button onclick="getPlainTxt()">获得带格式的纯文本</button>
        <button onclick="hasContent()">判断是否有内容</button>
        <button onclick="setFocus()">使编辑器获得焦点</button>
        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
        <button onmousedown="setblur(event)" >编辑器失去焦点</button>

    </div>
    <div>
        <button onclick="getText()">获得当前选中的文本</button>
        <button onclick="insertHtml()">插入给定的内容</button>
        <button id="enable" onclick="setEnabled()">可以编辑</button>
        <button onclick="setDisabled()">不可编辑</button>
        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
    </div>

</div> -->
<!-- <div>
    <button onclick="createEditor()">
    创建编辑器</button>
    <button onclick="deleteEditor()">
    删除编辑器</button>
</div> -->

<!-- // function isFocus(e){
    //     alert(UE.getEditor('editor').isFocus());
    //     UE.dom.domUtils.preventDefault(e)
    // }
    // function setblur(e){
    //     UE.getEditor('editor').blur();
    //     UE.dom.domUtils.preventDefault(e)
    // }
    // function insertHtml() {
    //     var value = prompt('插入html代码', '');
    //     UE.getEditor('editor').execCommand('insertHtml', value)
    // }
    // function createEditor() {
    //     enableBtn();
    //     UE.getEditor('editor');
    // }
    // function getAllHtml() {
    //     alert(UE.getEditor('editor').getAllHtml())
    // }
    // function getContent() {
    //     var arr = [];
    //     arr.push("使用editor.getContent()方法可以获得编辑器的内容");
    //     arr.push("内容为：");
    //     arr.push(UE.getEditor('editor').getContent());
    //     console.log(arr)
    // }
    // function getPlainTxt() {
    //     var arr = [];
    //     arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
    //     arr.push("内容为：");
    //     arr.push(UE.getEditor('editor').getPlainTxt());
    //     alert(arr.join('\n'))
    // }
    // function setContent(isAppendTo) {
    //     var arr = [];
    //     arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    //     UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
    //     alert(arr.join("\n"));
    // }
    // function setDisabled() {
    //     UE.getEditor('editor').setDisabled('fullscreen');
    //     disableBtn("enable");
    // }

    // function setEnabled() {
    //     UE.getEditor('editor').setEnabled();
    //     enableBtn();
    // }

    // function getText() {
    //     //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
    //     var range = UE.getEditor('editor').selection.getRange();
    //     range.select();
    //     var txt = UE.getEditor('editor').selection.getText();
    //     alert(txt)
    // }

    // function getContentTxt() {
    //     var arr = [];
    //     arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
    //     arr.push("编辑器的纯文本内容为：");
    //     arr.push(UE.getEditor('editor').getContentTxt());
    //     alert(arr.join("\n"));
    // }
    // function hasContent() {
    //     var arr = [];
    //     arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    //     arr.push("判断结果为：");
    //     arr.push(UE.getEditor('editor').hasContents());
    //     alert(arr.join("\n"));
    // }
    // function setFocus() {
    //     UE.getEditor('editor').focus();
    // }
    // function deleteEditor() {
    //     disableBtn();
    //     UE.getEditor('editor').destroy();
    // }
    // function disableBtn(str) {
    //     var div = document.getElementById('btns');
    //     var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
    //     for (var i = 0, btn; btn = btns[i++];) {
    //         if (btn.id == str) {
    //             UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
    //         } else {
    //             btn.setAttribute("disabled", "true");
    //         }
    //     }
    // }
    // function enableBtn() {
    //     var div = document.getElementById('btns');
    //     var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
    //     for (var i = 0, btn; btn = btns[i++];) {
    //         UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
    //     }
    // } -->



  